<template>
	<div class="view-form-detail" v-if="showDetail">
		<el-dialog :visible.sync="showDetail" width="50%" :before-close="handleClose">
			<div slot="title">
				<div class="info-box">
					<p class="no">文件流水号：{{ this.no }}</p>
				</div>
			</div>
			<div class="scroll-wrapper">
				<iframe ref="iframe" allowTransparency="true" class="iframelink" width="100%" height="100%" :src="formRemotelinkurl"></iframe>
			</div>
			<span slot="footer" class="dialog-footer"> </span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		},
		no: {
			type: String,
			default: () => '',
			required: true
		},
		formId: {
			type: Number,
			default: () => 0,
			required: true
		},
		detailId: {
			type: String,
			default: () => '',
			required: true
		}
	},
	data() {
		return {
			//拼接地址
			formRemotelinkurl: `${formUrl}/?id=${this.formId}&detailId=${this.detailId}&token=${localStorage.getItem(
				`zco_admin_token_${window.uid}`
			)}&url=${loginUrl}&template=0&hash=${new Date().getTime()}`
		};
	},
	mounted() {
		console.log(this.formSchema, this.formData);
	},
	methods: {
		handleClose() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="less" scoped>
.view-form-detail {
	.info-box {
		.no {
			color: #333;
			font-size: 14px;
			font-weight: 700;
		}
		.person-info {
			padding: 10px 0;
		}
	}
	.iframelink {
		width: 100%;
		height: 100%;
		min-height: 600px;
	}

	.scroll-wrapper {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
}
</style>

<style lang="less">
.view-form-detail {
	.el-dialog__header {
		border-bottom: 1px solid #eee;
	}
	.el-dialog__body {
		padding: 0 0 0 10px;
	}
	.el-dialog__footer {
		display: none;
	}
}
</style>
